/**
 * Layout Presets Component
 * 
 * Allows users to quickly switch between layout configurations
 */

import { Layout, Check } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { useLayoutStore, LAYOUT_PRESETS } from '@/store/layout';
import { cn } from '@/lib/utils';

export function LayoutPresets() {
  const currentPreset = useLayoutStore((state) => state.currentPreset);
  const applyPreset = useLayoutStore((state) => state.applyPreset);
  const resetToDefaults = useLayoutStore((state) => state.resetToDefaults);

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Layout className="w-5 h-5" />
          布局预设
        </CardTitle>
        <CardDescription>
          快速切换不同的界面布局
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Preset Cards */}
        <div className="grid grid-cols-2 gap-3">
          {LAYOUT_PRESETS.map((preset) => (
            <button
              key={preset.id}
              onClick={() => applyPreset(preset.id)}
              className={cn(
                'relative p-4 rounded-lg border-2 transition-all',
                'hover:border-primary/50 hover:shadow-md',
                'active:scale-95',
                currentPreset === preset.id
                  ? 'border-primary bg-primary/5'
                  : 'border-border'
              )}
            >
              {/* Selected indicator */}
              {currentPreset === preset.id && (
                <div className="absolute top-2 right-2">
                  <Check className="w-4 h-4 text-primary" />
                </div>
              )}

              {/* Preset name */}
              <div className="text-sm font-semibold mb-2">
                {preset.name}
              </div>

              {/* Visual representation */}
              <div className="flex gap-1 h-12 mb-2">
                {!preset.sidebarCollapsed && (
                  <div
                    className="bg-muted rounded"
                    style={{ width: `${(preset.sidebarWidth / 600) * 100}%` }}
                  />
                )}
                {!preset.sessionPanelCollapsed && (
                  <div
                    className="bg-muted/60 rounded"
                    style={{ width: `${(preset.sessionPanelWidth / 600) * 100}%` }}
                  />
                )}
                <div className="flex-1 bg-accent rounded" />
              </div>

              {/* Description */}
              <div className="text-xs text-muted-foreground">
                {preset.sidebarCollapsed || preset.sessionPanelCollapsed
                  ? '最大化聊天区域'
                  : `${preset.sidebarWidth}px | ${preset.sessionPanelWidth}px`}
              </div>
            </button>
          ))}
        </div>

        {/* Reset button */}
        <Button
          variant="outline"
          size="sm"
          onClick={resetToDefaults}
          className="w-full"
        >
          重置为默认布局
        </Button>

        <div className="text-xs text-muted-foreground">
          💡 提示：您也可以拖拽面板边缘来自定义宽度
        </div>
      </CardContent>
    </Card>
  );
}
